<template>
	<div class="c-wrap">
		<div class="c-header">
			<p class="text-title">
				<span class="f20 mr8 text-bold">南京市内机构({{ statistMod.total }}家)</span>
				<small>数据更新次日生效 更新时间：{{ statistMod.updateTime }}</small>
			</p>
		</div>
		<main class="c-main">
			<ApldTable class="mt10 self-table" v-bind="tableConfig" :data="tableData">
				<template v-slot:Region="{ row }">
					<el-tag color="#0052d9" :dark="true" effect="dark" @click="handleMenuClick(row)">{{ row.Region }}</el-tag>
				</template>
				<template v-slot:menu="{ row }">
					<el-button type="primary" plain @click="handleMenuClick(row)" size="small">查看</el-button>
				</template>
			</ApldTable>
		</main>

		<el-drawer size="85%" append-to-body v-model="drawer" :with-header="false">
			<infoIntegrity v-bind="paramsObj" v-if="drawer"></infoIntegrity>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { ApldTable } from '@/components/AplidCrud'
import { onMounted } from 'vue'
import apiMod from '@/apiMod/index'
import infoIntegrity from '../areaIntegrity/index.vue'

const drawer = ref(false)
const paramsObj = ref({})
const tableConfig = {
	showIndex: false,
	columns: [
		{
			label: '所属地区',
			prop: 'Region',
			align: 'center',
		},
		{
			label: '服务机构个数',
			prop: 'organizationNum',
			align: 'center',
		},
		{
			label: '完成进度',
			prop: 'organizationIntegrity',
			align: 'center',
		},
		{
			label: '服务对象人数',
			prop: 'serviceObjectNum',
			align: 'center',
		},
		{
			label: '完整度',
			prop: 'dpServiceObjectIntegrity',
			align: 'center',
		},
		{
			label: '从业人数',
			prop: 'staffNum',
			align: 'center',
		},
		{
			label: '完整度',
			prop: 'staffIntegrity',
			align: 'center',
		},
		{
			label: '操作',
			prop: 'menu',
			fixed: 'right',
			align: 'center',
		},
	],
}

const tableData = ref([])
const statistMod = ref({
	total: 0,
	updateTime: '',
})
const getInitData = () => {
	tableData.value = []
	apiMod.view_dpSubsidyStatistics_statistics().then((res) => {
		const data = res.data
		tableData.value = data.result
		statistMod.value.total = data.total
		statistMod.value.updateTime = data.updateTime
	})
}

const handleMenuClick = (row) => {
	paramsObj.value = {
		RegionId: row.RegionId,
		organizationNum: row.organizationNum,
		Region: row.Region,
	}
	drawer.value = true
	// router.push({
	//   path:'/datacenter/infoIntegrity/areaIntegrity/index',
	//   query:{
	//     RegionId:row.RegionId,
	//     organizationNum:row.organizationNum,
	//     Region:row.Region,
	//   }
	// })
}
onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.c-wrap {
	width: 100%;
	.c-header {
		padding: 5% 20%;
	}
	.c-main {
		padding: 5% 10%;
		background-color: #fff;
		.self-table {
			margin: 0 auto;
			border: 1px solid #dcdcdc;
			border-radius: 10px 10px 0 0;
		}
	}
}
.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #0052d9;
}
</style>
